<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8"/>
  <title>ZenTooltip - A simple, unobtrusive, yet memorable jQuery Plugin</title>
  <link href="zenTooltip.css" rel="stylesheet"/>
  <link href="demo.css" rel="stylesheet"/>
  <!--[if IE]><script src="html5.js"></script><![endif]-->
</head>
<body>
  <div id="page">
    <header>
      <h1 class="tooltip" title="A simple, unobtrusive, yet memorable jQuery tooltip plugin">ZenTooltip</h1>
      <nav>
      <span title="Skip to section" class="tooltip">#</span>:
      <a href="#examples">Examples</a>
      | <a href="#features">Features</a>
      | <a href="#usage">Usage</a>
      | <a href="#formatting">Text Formatting</a>
      | <a href="#options">Options</a>
      | <a href="#download">Download</a>
      </nav>
    </header>
    <section>
      <h2 id="examples" title="Pants-off, dance-off to follow." class="tooltip">Examples</h2>
      <ul>
        <li><span class="tooltip" title="simple tooltip">Simple tooltip</span></li>
        <li><span class="tooltip" title="#Tooltip with header# *Bold*, _italic_ and with |a paragraph|">Complex Tooltip</span></li>
        <li>
          <div class="tooltip" title="on a block element">And another</div>
          <select><option>IE select bug?</option></select>
        </li>
        <li><button class="tooltip2" title="_Classy_, with *custom* tags, delay, and mouse offset specified">With lot of extra options</button></li>
      </ul>
    </section>
    <section>
      <h2 id="features" title="This script does some stuff!" class="tooltip">Features</h2>
      <ul>
        <li>Unobtrusively extends the HTML title attribute</li>
        <li>Simple HTML makes styling easy</li>
        <li>Collision correction for bottom and right side of the window prevents the tooltip from going off-screen.</li>
        <li>Text formatting allows you to have bold, italic, and other styles in the tooltips.</li>
        
        <li>Supports <a href="http://docs.jquery.com/Plugins/bgiframe">jquery.bgiframe</a> hack, if included, to handle the annoying IE6 select bug.</li>
        <li>Compressed version less than 2k</li>
        <li>Tested in FF3, FF3.5, IE6, IE7, IE8, Chrome</li>
        <li>Note: The CSS dropshadows in this demo only work in FF3.1 and Webkit.</li>
      </ul>
    </section>
    <section>
      <h2 id="usage" title="Lean How!" class="tooltip">Usage</h2>
      <ol>
        <li>Include <a href="http://jquery.com">jQuery</a> 1.2 or higher, jquery.zentooltip.js, and zenTooltip.css on your page</li>
        <li>Add a title attribute to the elements with the text to be displayed.</li>
        <li>Invoke the tooltip plugin <code>$(".tooltip").zenTooltip();</code> on those elements</li>
      </ol>
    </section>
    <section>
      <h2 id="formatting" title="#Get Fancy!#" class="tooltip">Text Formatting</h2>
      <p>You can put some extra formatting into your tooltips by wrapping the text with some special characters.For example text wrapped with * will be bold. e.g. <code title="the next word will be *bold*" class="tooltip">title="the next word will be *bold*"</code>.</p>
      Default tags:
      <ul>
        <li><code class="tooltip" title="#Heading#">#Heading#</code></li>
        <li><code class="tooltip" title="*bold*">*bold*</code></li>
        <li><code class="tooltip" title="_italic_">_italic_</code></li>
        <li><code class="tooltip" title="|paragraph|">|paragraph|</code></li>
      </ul>
      <p>You can change these or add your own, see Options.</p>
      
      <h2 id="options" class="tooltip" title="Optional of course">Options</h2>
      <ul>
        <li>
          <strong>delay: [milliseconds]</strong>
          <em>Default: 300</em>
          <p>Hover delay before the tooltip is shown </p>
        </li>
        <li>
          <strong>mouseOffset: {top: [px], left: [px]} </strong>
          <em>Default: {left: 12, top: 22}</em>
          <p>Position of tooltip from cursor</p> 
        </li>
        <li>
          <strong>useFormatting: [bool]</strong>
          <em>Default: true</em>
          <p>Whether text formatting will be used. See Tags</p>
        </li>
        <li id="tags">
          <strong>tags: {[special character]:[associated tag],[...]}</strong>
          <em>Default: {"#":"h4", "*":"b", "_":"i", "|":"p"}</em>
          <p>Special formatting options for the tooltip. The special characters will be 
          replaced with the tag indicated.</p>
        </li>
        <li>
          <strong>tooltipClass: [class to add to tooltip]</strong>
          <p>Adds a optional class to the tooltip</p>
        </li>
      </ul>
      <h2 id="download" class="tooltip" title="Get it now!">Download</h2>
      <ul>
        <li><a href="http://zentooltip.googlecode.com/files/jquery.zentooltip.zip">jquery.zentooltip.zip</a> <small>(28.5 KB)</small></li>
        <li><a href="http://code.google.com/p/zentooltip">On Google Code</a></li>
      </ul>
    </section>
    <footer>
      
      <address>&copy; 2009 Jethro Larson</address>
      <p>Licensed under <a href="http://www.mozilla.org/MPL/">Mozilla Public License 1.1</a></p>
    </footer>
  </div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=4.9.0"></script>
  <!--[if IE lt 7]><script src="jquery.bgiframe.js"></script><![endif]-->
  <script src="jquery.zentooltip.js"></script>
  <script>
  $(function(){
    $(".tooltip").zenTooltip();
    $(".tooltip2").zenTooltip({tooltipClass: "two", tags: {"*":"code", "_":"del"}, mouseOffset: {top:40,left:60}, delay: 600});
  });
  </script>
</body>
</html>